<template>
	<div>
		<Notice></Notice>
		<u-navbar :is-back="true">
			<view class="navbar-slot flex" @click="toEdit">
				{{ value }}
			</view>
		</u-navbar>
		<u-sticky>
			<div :class="'tools '+(isShowMask?'':'hide')">
				<u-dropdown @open="isShowMask = true" @close="isShowMask = false" v-if="!!filterList.length">
					<u-dropdown-item v-model="filterId" :title="filterTitle" :options="filterList" @change="filterChange"></u-dropdown-item>
				</u-dropdown>
				<div class="r flex">
					<i class="multiple" v-if="t==1" @click="$store.state.multipleMode = !$store.state.multipleMode"></i>
					<i class="filter" @click="$store.state.isFilter = true"></i>
				</div>
			</div>
		</u-sticky>
		<div class="container">
			<AllList ref="allList"></AllList>
		</div>

		<div class="options flex" v-if="$store.state.multipleMode && t==1">
			<u-checkbox v-model="isAllCheck" @change="checkAll">全选</u-checkbox>
			<div class="r flex">
				<div class="r-i" @click="addWarn">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/remind.png"></u-image>
					<div class="text">加入预警</div>
				</div>
			</div>
		</div>

		<FilterPop :filters="filterList" :flag="flag"></FilterPop>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { mapState } from "vuex";
import AllList from "@/components/allList.vue";
import FilterPop from "@/components/filterPop.vue";
import { alias, addAlert } from "@/api/subject.js";

export default {
	components: {
		AllList, FilterPop
	},
	data() {
		return {
			value: "",
			t: null,
			flag: "home",
			params: {},

			isClear: false,

			isShowMask: false,
			filterList: [],
			filterTitle: "",
			filterId: "",

			isAllCheck: false,
		};
	},
	watch: {
		selectedArticle(val) {
			if(val.length == this.articleListLength){
				this.isAllCheck = true;
			}else{
				this.isAllCheck = false;
			}
		},
	},
	computed: {
		...mapState(["selectedArticle", "articleListLength"]),
	},
	onLoad(option) {
		this.t = option.t;
		this.params = JSON.parse(decodeURIComponent(option.data));
		this.value = this.params.top_search_value;
	},
	created() {
		this.$nextTick(()=>{
			setTimeout(()=>{
				this.$refs.allList.$emit("all_search", this.params);
			},100);
		});
	},
	methods: {
		toEdit() {
			uni.navigateBack({
				delta: 1
			});
		},
		clear() {
			this.words = [];
		},
		checkAll(e) {
			this.$refs.allList.$emit("checkAll", e.value)
		},
		addWarn() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				let ids = this.selectedArticle.map(item=>item.id);
				let subjectsId = this.selectedArticle.map(item=>item.subject_id);
				addAlert({
					id: ids,
					subject_id: subjectsId,
					summary: ""
				}).then(({code})=>{
					if(code == 200){
						this.$refs.uToast.show({
							title: "加入预警成功",
							type: "success",
						});
					}
				});
			}
		},
		filterChange(val) {
			let filter = this.filterList.filter(item=>item.id == val)[0];
			this.filterId = val;
			this.filterTitle = filter.filter_title;
			this.$store.state.filterParams = {...this.$store.state.filterParams, ...filter};
			this.$store.commit("isRefreshAllListHandle", new Date().getTime());
		},
	}
}
</script>

<style lang="scss">
.navbar-slot{
	width: 100%;
	padding: 10rpx;
	margin-right: 40rpx;
	border: 1rpx solid #ccc;
	box-sizing: border-box;
	border-radius: 10rpx;
}
.container{
	padding-bottom: 10rpx;
	// #ifdef H5
	height: calc(100vh - 176rpx);
	// #endif
	
	// #ifdef APP-PLUS
	height: calc(100vh - 206rpx);
	// #endif
}
.btn-box{
	border-top: 1rpx solid #f0f0f0;
	padding: 20rpx;
	justify-content: flex-end;
}
.tools{
	background-color: #fff;
	border-bottom: 1rpx solid #F0F0F0;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	height: 80rpx;
	position: relative;
	z-index: 100;
	.r{
		position: absolute;
		z-index: 100;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		align-items: center;
		i{
			cursor: pointer;
			width: 40rpx;
			height: 40rpx;
			margin: 0 10rpx;
		}
		.multiple{
			background: url(./../../static/confirm.png) no-repeat center/contain;
		}
		.filter{
			background: url(./../../static/filter-records.png) no-repeat center/contain;
		}
	}
	&.hide{
		/deep/ .u-dropdown__content{ 
			display: none;
		}
	}
}
/deep/ .u-dropdown__menu{
	height: 80rpx !important;
}
/deep/ .u-dropdown__menu__item{
	justify-content: unset;
	padding-left: 20rpx;
}
.options{
	width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
	position: fixed;
	z-index: 500;
	left: 0;
	bottom: 0;
	box-shadow: 0rpx -6rpx 30rpx 0rpx rgba(192, 192, 192, 0.3);
	padding: 0 20rpx;
	box-sizing: border-box;

	.r{
		flex: 1;
		justify-content: space-around;

		.r-i{
			cursor: pointer;
			text-align: center;
		}
		.icon{
			margin: auto;
		}
		.text{
			font-size: 26rpx;
			padding-top: 10rpx;
		}
	}
}
</style>
